<template>
  <ele-page>
    <PageSearch @search="reload" />
    <ele-card :body-style="{ paddingTop: '8px' }">
      <ele-pro-table
        ref="tableRef"
        sticky
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        :pagination="false"
        highlight-current-row
        :default-expand-all="false"
        cache-key="systemMenuTable"
      >
        <template #toolbar>
          <el-button type="primary" class="ele-btn-icon" :icon="Plus" @click="openEdit()">
            新增
          </el-button>
          <el-button class="ele-btn-icon" :icon="ColumnHeightOutlined" @click="expandAll">
            展开全部
          </el-button>
          <el-button class="ele-btn-icon" :icon="VerticalAlignMiddleOutlined" @click="foldAll">
            折叠全部
          </el-button>
        </template>

        <template #title="{ row }">
          <el-icon v-if="row.icon" :size="16" style="margin-right: 8px; vertical-align: -2px">
            <component :is="row.icon" />
          </el-icon>
          <span>{{ row.title }}</span>
        </template>

        <template #status="{ row }">
          <ComSwitch
            v-model="row.status"
            active-text="正常"
            inactive-text="停用"
            :inactive-value="2"
            :done="value => Http.post('/system/menu/status', { id: row.id, status: value })"
          />
        </template>
      </ele-pro-table>
    </ele-card>
    <PageEdit v-model="showEdit" :data="current" :parent-id="parentId" @done="reload" />
  </ele-page>
</template>

<script setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { toTree } from 'ele-admin-plus/es'
import PageSearch from './components/search.vue'
import PageEdit from './components/edit.vue'
import {
  ColumnHeightOutlined,
  VerticalAlignMiddleOutlined,
} from '@/components/icons'

import { Http, confirm, formatDate, message } from '@/utils/index'

defineOptions({
  name: 'SystemMenu',
})

/** 表格实例 */
const tableRef = ref(null)

/** 表格列配置 */
const columns = ref([
  {
    columnKey: 'index',
    type: 'index',
    width: 50,
    align: 'center',
    showOverflowTooltip: true,
    fixed: 'left',
  },
  {
    prop: 'name',
    label: '部门名称',
    showOverflowTooltip: true,
    minWidth: 200,
    slot: 'name',
    fixed: 'left',
  },
  {
    prop: 'code',
    label: '部门编码',
    showOverflowTooltip: true,
    align: 'center',
    minWidth: 110,
  },
  {
    prop: 'fullname',
    label: '部门全称',
    showOverflowTooltip: true,
    align: 'center',
    minWidth: 200,
  },
  {
    prop: 'type',
    label: '类型',
    align: 'center',
    showOverflowTooltip: true,
    width: 100,
    slot: 'type',
  },
  {
    prop: 'sort',
    label: '排序',
    align: 'center',
    showOverflowTooltip: true,
    width: 60,
  },
  {
    prop: 'note',
    label: '备注',
    align: 'center',
    showOverflowTooltip: true,
    width: 200,
  },
  {
    prop: 'create_time',
    label: '创建时间',
    showOverflowTooltip: true,
    minWidth: 160,
    formatter: (row) => {
      return formatDate(row.create_time)
    },
  },
  {
    prop: 'update_time',
    label: '更新时间',
    showOverflowTooltip: true,
    minWidth: 160,
    formatter: (row) => {
      return formatDate(row.formatDate)
    },
  },
  {
    columnKey: 'action',
    label: '操作',
    width: 190,
    align: 'center',
    resizable: false,
    slot: 'action',
    fixed: 'right',
  },
])

/** 当前编辑数据 */
const current = ref(null)

/** 是否显示编辑弹窗 */
const showEdit = ref(false)

/** 上级菜单id */
const parentId = ref()

/** 表格数据源 */
async function datasource({ where }) {
  const res = await Http.get('dept/index', { ...where })
  return toTree({
    data: res.data,
    idField: 'id',
    parentIdField: 'pid',
  })
}

/** 刷新表格 */
function reload(where) {
  tableRef.value?.reload?.({ where })
}

/** 打开编辑弹窗 */
function openEdit(row, id) {
  current.value = row ?? null
  parentId.value = id
  showEdit.value = true
}

/** 删除单个 */
function remove(row) {
  if (row.children?.length) {
    message('请先删除子节点', 'error')
    return
  }
  confirm(`确定要删除“${row.title}”吗?`, '系统提示', {
    type: 'warning',
    draggable: true,
  })
    .then(() => {
      const loading = message('请求中..', 'loading')
      removeMenu(row.id)
        .then((res) => {
          message(res.msg, res.success)
          if (res.success)
            reload()
        })
        .finally(() => {
          loading.close()
        })
    })
    .catch(() => { })
}

/** 展开全部 */
function expandAll() {
  tableRef.value?.toggleRowExpansionAll(true)
}

/** 折叠全部 */
function foldAll() {
  tableRef.value?.toggleRowExpansionAll(false)
}
</script>
